<template>

  <div ref="points" class="AddOrUpdate_main add_container main_container ">

    <div class="main_main card_shadow">

      <div ref="info">
        <div class="formItem_header">
          极分中心
        </div>
        <div class="integral">
          <span>{{ latestPoints }}</span>极分
        </div>
        <div class="avatar_title">
          极分可通过完成新手任务、持续使用系统获得，积累极分数可兑换奖励 <span v-if="pointsCashStatus==1" @click="applyRedemption">申请兑换</span>
        </div>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane v-if="$store.state.user.pointsGetStatus==1" label="引荐分享" name="first">
          <IntroductionSharing />
        </el-tab-pane>
        <el-tab-pane v-if="$store.state.user.pointsGetStatus==1" label="限时任务" name="second">
          <TimedTask />
        </el-tab-pane>
        <el-tab-pane label="极分记录" name="third">
          <div ref="point" class="point">
            <SlideTable ref="SlideTable2" style="width:100%" :max-height="tableHeight" :no-more="noMore" :table-data="tableData" :table-column="tableColumn" @loadMoreData="loadMoreData" />
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import { getPoints, recordList } from '@/api/common/personalCenter'
import { updateUser as update, getUser as getById } from '@/api/system/user'
import { all as getDept } from '@/api/system/dept'
import { mapGetters } from 'vuex'
import AvatarUpload from '../AvatarUpload'
import ChangePassword from '../ChangePassword'
import IntroductionSharing from './IntroductionSharing.vue'
import ApplyRedemption from '../ApplyRedemption.vue'
import WxScan from './wxScan.vue'
import TimedTask from './TimedTask.vue'
import SlideTable from './SlideTable.vue'
import ExchangePoints from './ExchangePoints.vue'
import Tip from './Tip.vue'
export default {
  name: 'PersonalAccount',
  components: {
    IntroductionSharing, TimedTask, SlideTable
  },
  data() {
    const validateEmail = (rule, value, callback) => {
      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(value) && value) {
        callback(new Error('邮箱格式不正确'))
      } else {
        callback()
      }
    }
    const validatePhone = (rule, value, callback) => {
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if (!value.trim()) {
        callback(new Error('联系方式不能为空'))
      } else
      if (!reg.test(value.trim())) {
        callback(new Error('联系方式格式不正确'))
      } else {
        callback()
      }
    }
    const validateRealName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('姓名不能为空'))
      } else {
        callback()
      }
    }
    return {
      divHeight: '',
      tableHeight: '',
      noMore: false,
      tableColumn: [
        { label: '操作', prop: 'operation' },
        { label: '时间', prop: 'operationTime' },
        { label: '极分数', prop: 'pointsChange' }
      ],
      pageData: {
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      formData: {
        userId: undefined,
        realName: undefined,
        email: undefined,
        deptName: undefined,
        deptId: '',
        expirationTime: '',
        name: '',
        userName: '',
        phone: ''
      },
      pointsCash: {},
      latestPoints: '0',
      deptOptions: [],
      isEdit: true,
      activeName: 'first',
      isAdmin: false,
      edit1: false,
      edit2: false,
      windowHeight: document.body.clientHeight,
      rules: {
        realName: [
          { validator: validateRealName, trigger: 'change' }
        ],
        email: [
          { validator: validateEmail, trigger: 'change' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'change' }
        ],
        deptId: [
          { message: '所属部门部门不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId', 'userName', 'companyId', 'avatar', 'pointsGetStatus', 'pointsCashStatus'
    ])
  },
  watch: {
    windowHeight(val) {
      console.log('实时屏幕高度：', val, this.windowHeight)
      this.$nextTick(() => {
        this.divHeight = this.$refs.info.offsetHeight
        this.tableHeight = (this.$refs.points.offsetHeight - this.divHeight - 55) + ''
        console.log(this.tableHeight)
      })
    },
    pointsGetStatus(newVal, oldVal) {
      if (newVal == 0) {
        this.activeName = 'third'
      }
    }
  },

  mounted() {
    console.log('pointsGetStatus', this.$store.state.user)
    console.log('pointsGetStatus', this.$store.state.user.pointsGetStatus)

    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight // 高
      })()
    }
    this.$nextTick(() => {
      this.divHeight = this.$refs.info.offsetHeight
      this.tableHeight = (this.$refs.points.offsetHeight - this.divHeight - 55) + ''
      console.log(this.tableHeight)
    })
    this.getList()
    this.getPoints()
    this.getById()
    this.getDept()
  },
  methods: {
    loadMoreData() {
      this.pageData.pageNum++
      this.getList()
    },
    getList() {
      recordList({ userId: this.$store.state.user.userId, ...this.pageData }).then(res => {
        if (res.data.length < this.pageData.pageSize) {
          this.noMore = true
        }
        this.tableData = this.tableData.concat(res.data)
        setTimeout(() => {
          this.$refs.SlideTable2.stopLoad()
        }, 200)
      })
    },
    getPoints() {
      getPoints(this.$store.state.user.userId).then(res => {
        this.latestPoints = res.data.latestPoints
      })
    },
    applyRedemption() {
      this.getPoints()
      if (this.$store.state.user.authStatus == '2' && !this.$store.state.user.unionId) {
        this.$layer.iframe({// 弹框
          content: {
            content: WxScan, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: {
            }// props
          },
          area: ['300px', '300px'],
          title: '绑定微信', // 标题
          shadeClose: false // 点击遮罩是否关闭
        })
      } else if (this.$store.state.user.authStatus == '2' && this.$store.state.user.unionId) {
        getById(this.userId).then(res => {
          this.pointsCash = res.pointsCash
          if (this.pointsCash && this.pointsCash.status == '1') {
            this.$layer.iframe({// 弹框
              content: {
                content: Tip, // 传递的组件对象
                parent: this, // 当前的vue对象
                data: {
                  points: this.pointsCash.applyPoints
                }// props
              },
              area: ['440px', '240px'],
              title: '申请兑换', // 标题
              shadeClose: false // 点击遮罩是否关闭
            })
          } else {
            this.$layer.iframe({// 弹框
              content: {
                content: ExchangePoints, // 传递的组件对象
                parent: this, // 当前的vue对象
                data: {
                }// props
              },
              area: ['440px', '240px'],
              title: '申请兑换', // 标题
              shadeClose: false // 点击遮罩是否关闭
            })
          }
        })
      } else {
        this.$layer.iframe({// 弹框
          content: {
            content: ApplyRedemption, // 传递的组件对象
            parent: this, // 当前的vue对象
            data: {
            }// props
          },
          area: ['440px', '200px'],
          title: '申请兑换', // 标题
          shadeClose: false // 点击遮罩是否关闭
        })
      }
    },
    getDept() {
      getDept({ status: 1 }).then(res => {
        this.deptOptions = res.data
        // if (!this.id) {
        //   this.formData.deptId = res.data[0].deptId
        // }
      })
    },
    editInfo() {
      this.isEdit = false
    },
    getById() {
      getById(this.userId).then(res => {
        this.pointsCash = res.pointsCash
        // this.formData.deptId = res.data.dept ? res.data.dept.deptId : ''
        // this.formData.deptName = res.data.dept ? res.data.dept.deptName : ''
        // this.formData.realName = res.data.realName
        // this.formData.userName = res.data.userName
        // this.$store.state.user.userName = res.data.realName
        // this.formData.phone = this.$store.state.user.phone
        // this.formData.email = res.data.email
        // this.formData.userId = res.data.userId
        // this.formData.expirationTime = res.roles[0].expirationTime
        // this.isAdmin = res.data.isAdmin
        // this.edit1 = false
        // this.edit2 = false
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          update(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$router.go(0)
          })
        }
      })
      // let tag = true

      // if (tag && !this.formData.realName) {
      //   tag = false
      //   this.$message({
      //     message: '姓名不能为空',
      //     type: 'warning'
      //   })
      // }
      // if (tag && this.formData.email && !reg.test(this.formData.email)) {
      //   tag = false
      //   this.$message({
      //     message: '邮箱格式不正确',
      //     type: 'warning'
      //   })
      // }
      // if (tag) {
      // update(this.formData).then(res => {
      //   this.$message({
      //     message: res.msg,
      //     type: 'success'
      //   })

      //   this.getById()
      // })
      // }
    },
    changeAvatar() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: AvatarUpload, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['880px', '600px'],
        title: '修改头像', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    changePassword() { // 修改头像
      this.$layer.iframe({// 弹框
        content: {
          content: ChangePassword, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
          }// props
        },
        area: ['440px', '600px'],
        title: '修改密码', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    }
  }
}
</script>

<style lang="less" scoped>
.point{
  height: 100%;
  width: 100%;
  padding:0 20px;
  margin-bottom: 20px;
}
.card_shadow{
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px !important;
}
.integral{
   width: calc(100% - 20px);
   text-align: right;
   padding-bottom: 20px;
  span{
    font-size:60px ;
    color:#387BFC ;
    margin-right:20px ;
    line-height: 0px;
  }
}
.avatar_title{
  color: #999;
  width: calc(100% - 20px);
  text-align: right;
  // padding-left: 10px !important;
  span{
    color: rgb(0, 118, 224);
    margin-left: 10px;
    cursor: pointer;
  }
}
.formItem_header{
  font-weight: bold;
}
.main_main{
  margin: 0;
  padding-top: 0;
    .info{
        // padding:0 10px;
    }
    .form_button{
      margin-top: 20px;
      margin-left: 20px;
      width: 100%;
    }
    /deep/ .el-form{
        width: 60%;
    }
    /deep/ .el-form-item__content{
        margin-left: 10px !important;
    }
}

</style>
